<template>
    <div class="wrap">
        <div style="display: flex;align-items: center;padding-left: 1rem;">
            <div class="head-user" v-show="userPhone!==''">
                <div class="userInfo">
                    <div style="">手机号:{{encodePhone}}</div>
                    <div style="color: #808080;font-size: 14px">可用积分:{{integral}}</div>
                </div>
                <el-dropdown @command="handleCommand">
                    <el-button size="small" type="primary">
                        筛选<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="all">全部</el-dropdown-item>
                        <el-dropdown-item command="onlyCan">仅可兑换</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="head-functions">
                <el-button size="small" type="primary" icon="el-icon-circle-plus-outline"
                           @click="goSaveNewExchangeGood">添加商品
                </el-button>
            </div>
        </div>
        <el-scrollbar class="sidebar-wrapper">
            <el-col v-for="item in goodsList" :span="4" style="margin: 20px">
                <div class="exchangeGoods-card">
                    <div class="sold-out" v-show="!item.stock>0">
                        <img style="width: 76px;height: 76px" src="../../assets/icons/soldOut.png"/>
                    </div>
                    <i @click="removeIt(item.id)" class="el-icon-close"></i>
                    <el-image style="width: 100%;height: 75%;border-radius: 8px" :src="item.imgUrl"></el-image>
                    <div style="display: flex">
                        <div style="font-size: 30px;color: #193968;margin-left: 1.2rem;display: flex;width: 90%">
                            {{item.exchange}}
                            <div style="font-size: 10px;color: #6e7072;display: flex;align-items: end;margin-bottom: 0.2rem">
                                积分
                            </div>
                        </div>
                        <div style="font-size: 20px;margin-right: 2rem;margin-top: 0.5rem;z-index: 2">
                            <i class="el-icon-edit" @click="goEditGood(item)"></i>
                        </div>
                    </div>
                    <div class="func">
                        <div style="font-size: 16px;width: 100px;overflow:hidden;white-space: nowrap; text-overflow: ellipsis;"
                             :show-overflow-tooltip="true">
                            {{item.name}}
                        </div>
                        <el-button size="mini" type="plain" @click="goExchange(item)">兑换</el-button>
                    </div>
                </div>
            </el-col>
        </el-scrollbar>
        <Exchange :good="good" :userPhone="userPhone" :exchangeShow="exchangeShow"
                  @cancel="exchangeShow=false"></Exchange>
        <NewExchangeGood @saveSuccess="saveSuccess" :saveNewShow="saveNewShow" @cancel="saveNewShow=false"/>
        <UpdateExchange :updateShow="updateShow" :updateGood="updateGood" @cancel="updateShow=false"
                        @updateSuccess="saveSuccess"/>
    </div>
</template>

<script>
    import {getIntegralGoodsByPage, getExchangeGoodsByPhone, removeExchangeGoodById} from '@/utils/apis/integral'
    import Exchange from "@/components/integral/Exchange";
    import NewExchangeGood from "@/components/integral/NewExchangeGood";
    import {removeEquipById} from "@/utils/apis/equip";
    import UpdateExchange from "@/components/integral/UpdateExchange";

    export default {
        name: "PointMall",
        components: {
            UpdateExchange,
            NewExchangeGood,
            Exchange
        },
        data() {
            return {
                current: 1,
                size: 1000,
                //可兑换商品列表
                goodsList: [],
                //用户列表跳转数据
                userPhone: '',
                integral: '',
                //是否展示兑换页面
                exchangeShow: false,
                //兑换商品
                good: {},
                //添加是否展示
                saveNewShow: false,
                //修改对象
                updateGood: {},
                //修改是否展示
                updateShow: false
            }
        },
        created() {
            this.initData()
            this.updateUserPhone()
        },
        computed: {
            encodePhone() {
                if (this.userPhone !== '') {
                    return this.userPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
                } else {
                    return ''
                }
            },

        },
        methods: {
            //初始化数据
            initData() {
                getIntegralGoodsByPage(this.current, this.size).then(res => {
                    this.goodsList = res.data.data.records
                })
            },
            //判断是否路由带参并设置用户手机号
            updateUserPhone() {
                if (this.$route.query.phone !== undefined) {
                    this.userPhone = this.$route.query.phone
                    this.integral = this.$route.query.integral
                    console.log(this.userPhone, this.integral)
                }
            },
            //切换查询所有或者可兑换
            handleCommand(e) {
                if (e === 'all') {
                    this.initData()
                } else {
                    getExchangeGoodsByPhone(1, this.userPhone).then(res => {
                        this.goodsList = res.data.data.records
                    })
                }
            },
            //去兑换
            goExchange(item) {
                this.good = JSON.parse(JSON.stringify(item))
                this.exchangeShow = true
            },
            //去添加兑换商品
            goSaveNewExchangeGood() {
                this.saveNewShow = true
            },
            //保存成功回调
            saveSuccess() {
                this.initData()
            },
            //删除商品
            removeIt(id) {
                console.log(id)
                this.$confirm('确认移除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await removeExchangeGoodById(id).then(() => {
                        this.$message.success('删除成功')
                        this.$nextTick(() => {
                            this.initData()
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            //编辑商品信息
            goEditGood(item) {
                this.updateShow = true
                this.updateGood = JSON.parse(JSON.stringify(item))
            }
        }
    }
</script>

<style scoped>
    .head-user {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .head-functions {
        margin-left: 0.6rem;
    }

    .userInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0.3rem;
        padding-right: 2rem;
    }

    .exchangeGoods-card {
        height: 280px;
        border-radius: 8px;
        box-shadow: 1px 1px 6px rgba(120, 120, 120, .3);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .exchangeGoods-card:hover {
        box-shadow: 1px 1px 6px rgba(20, 20, 20, .3);
    }

    .func {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 0.2rem;
    }

    .sidebar-wrapper {
        width: 98%;
        height: 650px;
        margin-top: 28px;
        overflow-x: hidden;
    }

    .el-icon-close {
        width: 22px;
        height: 22px;
        display: flex;
        justify-content: end;
        align-items: start;
        color: #8e9aaf;
        background-color: rgba(220, 220, 220, 0.6);
        position: absolute;
        z-index: 2;
        right: 0;
        border-bottom-left-radius: 30px;
    }

    /*    售罄*/
    .sold-out {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        background-color: rgba(255, 255, 255, .5);
    }
</style>